<template>
  <base-page-view class-name="page-container">
    <view class="main">
      <view class="my-top">
        <view class="head-box">
          <url-image :src="userInfo.head_img" is-head width="30" height="30" class-name="user-icon" class="userIcon"/>
          <view class="phone">{{memberInfo.mobile | phoneHide}}</view>
        </view>
        <view class="slogan">{{memberInfo.slogan}}</view>
        <view class="dj-name">{{ memberInfo.cur_member_type | memberTxt}}</view>
        <view class="kt-box">
          <view class="left">
            <text v-if="memberInfo.expire_time">{{memberInfo.expire_time|formatDate('yyyy-MM-dd')}} 到期</text>
          </view>
          <view class="right" @click="$navigateTo('/pagesMine/myBuddy/myVip/index')">
            <text>我的VIP会员卡</text>
          </view>
        </view>
      </view>
      <view class="kt-title">
        <view class="title">{{select_type!==3?'选择升级礼包':'尊享特权'}} </view>
        <view class="right" @click="qy_duibi()">
          <text class="name">查看权益对比</text>
          <url-image src="/static/images/member/member/right.png" mode="widthFix" width="12" height="20"></url-image>
        </view>
      </view>
      <view class="hyk-box" v-if="select_type!==3">
        <view class="item-box" :class="select_type===1?'select-box':'un-select-box'" @click="qyChange(1)">
          <view class="kt-box" v-if="select_type===1">{{memberInfo.is_open_vip_card?'已升级':'待升级'}}</view>
          <view class="title-box">
            <view>VIP会员礼包</view>
            <view>{{memberInfo.vip_card_fee||''}}元/{{memberInfo.vip_card_dura||''}}{{memberInfo.vip_card_unit|memberUnit}}</view>
          </view>
        </view>
        <view class="item-box" :class="select_type===2?'select-box':'un-select-box'" @click="qyChange(2)">
          <view class="kt-box" v-if="select_type===2">{{memberInfo.is_open_diamond_card?'已升级':'待升级'}}</view>
          <view class="title-box">
            <view>钻石会员礼包</view>
            <view>{{memberInfo.diamond_card_fee||''}}元/{{memberInfo.diamond_card_dura||''}}{{memberInfo.diamond_card_unit|memberUnit}}</view>
          </view>
        </view>
      </view>
      <!-- ico -->
      <view class="qy-content">
        <view class="qy-box" v-for="(item,index) in qy_list" :key="index" @click="go_url(item)">
          <image :src="item.icon_url" mode="widthFix" class="qy-img"></image>
          <view class="name">{{item.title}}</view>
        </view>
      </view>
      <!-- 免费领 -->
      <template v-if="freeList&&freeList.length>0">
        <view class="top"></view>
        <view class="goods-content" @click="$navigateTo('/pagesMember/discount/index?type=30')">
          <view class="title-box">钻石福利</view>
          <view class="goods-box">
            <view class="goods-item" v-for="(item,index) in freeList.slice(0,3)" :key="index">
              <image class="goods-img" :src="item.image"></image>
              <view class="name">{{item.name}}</view>
              <view class="price"><text class="symbol">￥</text>{{item.goods_attrs[0].vip_price|formatMoney}}</view>
              <view class="y-price">￥{{item.goods_attrs[0].price|formatMoney}}</view>
            </view>
          </view>
        </view>
      </template>
      <!-- 低价购 -->
      <template v-if="lowList&&lowList.length>0">
        <view class="top"></view>
        <view class="goods-content" @click="$navigateTo('/pagesMember/discount/index?type=31')">
          <view class="title-box">限时秒杀</view>
          <view class="goods-box">
            <view class="goods-item" v-for="(item,index) in lowList.slice(0,3)" :key="index">
              <image class="goods-img" :src="item.image"></image>
              <view class="name">{{item.name}}</view>
              <view class="price"><text class="symbol">￥</text>{{item.goods_attrs[0].vip_price|formatMoney}}</view>
              <view class="y-price">￥{{item.goods_attrs[0].price|formatMoney}}</view>
            </view>
          </view>
        </view>
      </template>
      <view class="kt-btn-box">
        <view class="kt-btn" @click="goMemberPay()" v-if="select_type!==3&&btn_show">
          <view class="text-box">
            <text class="txt1">{{btn_txt}}</text>
            <text class="txt2">￥</text>
            <text class="txt3">{{btn_price}}</text>
            <!-- <text class="txt4"> / 年</text> -->
            <url-image src="/static/images/member/member/xianshi.png" width="56" height="40" class="xianshi"></url-image>
          </view>
        </view>
      </view>
    </view>
	</base-page-view>
</template>

<script>
  import { h5NavigateTo, toFunctionDetail, toGoods } from '@/utils/navigateTo'
	export default {
		data() {
			return {
				memberInfo:{},
        equities_list:[],
        select_type:2,//选择的类型,0普通,1vip,2钻石,3董事
        freeList:[],//免费领列表
        lowList:[],//低价购列表
			}
		},
    filters: {
      phoneHide(value){
        if(value){
          var reg = /^(\d{3})\d{4}(\d{4})$/;
          return value.replace(reg, "$1****$2");
        }
      },
      memberUnit(value){
        switch (value){
          case 1:
            return "天"
            break;
          case 2:
            return "月"
            break;
          case 3:
            return "季"
            break;
          case 4:
            return "年"
            break;
          case 5:
            return "终身"
            break;
          default:
            return ""
            break;
        }
      },
      memberTxt (value) {
        switch (value){
          case 0:
            return "普通会员"
            break;
          case 1:
            return "VIP会员"
            break;
          case 2:
            return "钻石会员"
            break;
          case 3:
            return "董事会员"
            break;
          default:
            return ""
            break;
        }
      }
    },
    computed:{
      //是否显示按钮
      btn_show(){
        let show=false;
        switch (this.select_type){
          case 1:
            if(this.memberInfo.is_sup_ren_vip_card===0){
              show=false;
            }else{
              show=true;
            }
            break;
          case 2:
            if(this.memberInfo.is_sup_ren_diamond_card===0){
              show=false;
            }else{
              show=true;
            }
            break;
          default:
            show=false;
            break;
        }
        return show;
      },
      //按钮文字
      btn_txt(){
        if(this.select_type==1){
          if(this.memberInfo.is_open_vip_card==1){
            return "立即续费"
          }else{
            return "立即升级"
          }
        }else if(this.select_type==2){
          if(this.memberInfo.is_open_diamond_card==1){
            return "立即续费"
          }else{
            return "立即升级"
          }
        }
      },
      //按钮显示价格
      btn_price(){
        switch (this.select_type){
          case 1:
            return this.memberInfo.vip_card_fee
            break;
          case 2:
            return this.memberInfo.diamond_card_fee
            break;
          default:
            return ""
            break;
        }
      },
      //显示的权益列表
      qy_list(){
        switch (this.select_type){
          //vip权益
          case 1:
            return this.memberInfo.vip_privilege_list
            break;
          //钻石权益
          case 2:
            return this.memberInfo.diamond_privilege_list
            break;
          //董事权益
          case 3:
            return this.memberInfo.director_privilege_list
            break;
          default:
            return []
            break;
        }
      }
    },
    onLoad() {
      if(!this.token){
        this.$navigateTo('/pages/login/index');
        return;
      }
    },
    onShow() {
      if(!this.token){
        this.$navigateTo('/pages/login/index');
        return;
      }
      this.get_member();
      this.getDiscount();
    },
		methods: {
      //查询优惠商品
      async getDiscount(){
        //免费领
        await this.$api.goodsApi.getDiscountGoods({
          discountType:30,
        }).then(res=>{
          if(res.code===0){
            this.freeList=res.data?.discount_goods_d_t_o_s;
          }
        });
        //低价购
        await this.$api.goodsApi.getDiscountGoods({
          discountType:31,
        }).then(res=>{
          if(res.code===0){
            this.lowList=res.data?.discount_goods_d_t_o_s;
          }
        });
      },
      //权益对比
      qy_duibi(){
        if(process.env.VUE_APP_BUILD_TYPE === 'PROD'){
          this.$navigateTo('/pagesDetail/template/index?id=9929e925-1026-44ed-95c1-3522d5b1810a');
        }else{
          this.$navigateTo('/pagesDetail/template/index?id=2f28b642-a30b-4756-905c-81af5d6c16ec');
        }
      },
      back(){
        uni.navigateBack();
      },
      go_url(item){
        toFunctionDetail(item);
      },
			async get_member(){
        const res = await this.$api.memberApi.getMyMemberCardInfo();
        if(res.code===0){
          this.memberInfo=res.data;
          //董事
          if(this.memberInfo.cur_member_type===3){
            this.select_type=3;
          }
        }
      },
      qyChange(value){
        this.select_type=value;
      },
      goMemberPay(){
        let memberType="";
        switch (this.select_type){
          case 1:
            memberType="vip";
            break;
          case 2:
            memberType="diamond";
          default:
            break;
        }
        this.$navigateTo(`/pagesMember/pay/index?type=${memberType}`);
      }
		}
	}
</script>
<style scoped lang="scss">
page,.page-container{
  background: #ffffff !important;
}
.main{
  min-height: 100%;
  background: #ffffff !important;
  padding: 30rpx 0rpx 40rpx;
  font-family: PingFang SC;
  position: relative;
  padding-bottom: calc(156rpx + constant(safe-area-inset-bottom);
  padding-bottom: calc(156rpx + env(safe-area-inset-bottom));
}
.my-top{
  width: 725rpx;
  height: 408rpx;
  margin: auto;
  background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/member/my-back.png') no-repeat;
  background-size: 100% auto;
  position: relative;
  .head-box{
    padding: 40rpx 60rpx 0rpx;
    display: flex;
    align-items: center;
    .user-icon{
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .userIcon{
      width: 30rpx;
      height: 30rpx;
      overflow: hidden;
      border-radius: 50%;
      overflow: hidden;
    }
    .phone{
      font-size: 26rpx;
      color: #FBDBAC;
      margin-left: 13rpx;
    }
  }
  .slogan{
    color: #FBDBAC;
    font-size: 24rpx;
    opacity: 0.8;
    padding: 12rpx 60rpx 0rpx 60rpx;
  }
  .dj-name{
    color: #FBDBAC;
    font-size: 58rpx;
    padding: 38rpx 0rpx 30rpx 60rpx;
  }
  .kt-box{
    position: absolute;
    bottom: 100rpx;
    left: 0rpx;
    right: 0rpx;
    width: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50rpx 60rpx 0rpx 60rpx;
    color: #FBDBAC;
    opacity: 0.8;
    .left{
      font-size: 26rpx;
    }
    .right{
      display: flex;
      align-items: center;
      .yaoqing{
        margin-left: 10rpx;
      }
    }
  }
}
.kt-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 30rpx 52rpx 50rpx;
  .title{
    font-size: 32rpx;
  }
  .right{
    font-size: 24rpx;
    color: #333333;
    .name{
      margin-right: 10rpx;
      opacity: 0.6;
    }
  }
}
.hyk-box{
  display: flex;
  margin-top: -12rpx;
  padding: 0rpx 30rpx 0rpx;
  justify-content: space-between;
  .item-box{
    display: flex;
    justify-content: center;
    position: relative;
    width: 333rpx;
    height: 199rpx;
    border-radius: 10rpx;
    .kt-box{
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      width: 109rpx;
      height: 39rpx;
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/member/kt-back.png') no-repeat;
      background-size: 100% auto;
      text-align: center;
      line-height: 39rpx;
      font-size: 24rpx;
      color: white;
    }
    .title-box{
      position: absolute;
      min-width: 100%;
      text-align: center;
      top: 50rpx;
      left: 50%;
      transform: translate(-50%,0);
      color: #F9D9AC;
      font-size: 38rpx;
      line-height: 1.5;
    }
    &.select-box{
      width: 333rpx;
      height: 287rpx;
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/member/zs-back3.png') no-repeat;
      background-size: 100%;
      background-position: 1rpx;
      .title-box{
        opacity: 0.8;
      }
    }
    &.un-select-box{
       box-shadow: 0rpx 0rpx 40rpx rgb(223, 223, 223);
       .title-box{
        color: #333333;
      }
    }
  }
}
.kt-title2{
  margin-top: 44rpx;
}
.qy-content{
  text-align: center;
  display: flex;
  flex-wrap:wrap;
  .qy-box{
    width: 25%;
    margin-bottom: 36rpx;
    .name{
      font-size: 26rpx;
      margin-top: 10rpx;
      color: #666666;
    }
    .qy-img{
      width: 80rpx;
      height: 80rpx;
    }
  }
}
.kt-btn-box{
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  padding-bottom: calc(30rpx + constant(safe-area-inset-bottom);
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  background: white;
}
.kt-btn{
  height: 100rpx;
  margin: 10rpx 30rpx 0rpx;
  background: linear-gradient(38.4479deg, #272729 100%,#4C4C4F 0% );
  border-radius: 10rpx;
  color: #F9D9AC;
  display: flex;
  align-items: center;
  justify-content: center;
  .text-box{
    position: relative;
    // display: flex;
    // align-items: center;
    text-align: center;
    vertical-align:bottom;
    .txt1{
      font-size: 32rpx;
      font-family: PingFang SC;
      color: #FBDBAC;
      font-weight: bold;
    }
    .txt2{
      font-size: 28rpx;
      margin: 0rpx 6rpx;
    }
    .txt3{
      font-size: 40rpx;
    }
    .txt4{
      white-space: pre-wrap;
      word-break:break-all;
      word-wrap:break-word;
      margin-left: 8rpx;
    }
    .xianshi{
      position: absolute;
      top:-30rpx;
      right: -40rpx;
    }
  }
}
.top{
  height: 20rpx;
  background: #F5F5F5;
}
.goods-content{
  padding: 0rpx 36rpx 45rpx;
  .title-box{
    padding: 44rpx 0rpx 37rpx;
    font-size: 32rpx;
  }
  .goods-box{
    display: flex;
    .goods-item{
      width: 200rpx;
      margin-right: 40rpx;
      &:last-child{
        margin-right: 0rpx;
      }
      .goods-img{
        width: 200rpx;
        height: 200rpx;
      }
      .name{
        width: 169rpx;
        margin: auto;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        white-space:nowrap;		//不换行
        overflow:hidden;		//溢出隐藏
        text-overflow:ellipsis;	//当内联内容溢出块容器时，将溢出部分替换为...
        line-height: 1;
        margin-top: 20rpx;
        text-align: center;
      }
      .price{
        font-size: 28rpx;
        font-family: PingFang SC;
        color: #000000;
        line-height: 26rpx;
        font-weight: bold;
        text-align: center;
        .symbol{
          font-size: 22rpx;
          font-weight: 400;
        }
        margin-top: 28rpx;
      }
      .y-price{
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        text-decoration: line-through;
        color: #999999;
        line-height: 1;
        margin-top: 14rpx;
        text-align: center;
      }
    }
  }
}
</style>